<template>
    <div class="content">
        <el-row class="block_title row">兴业数金执剑人账户</el-row>
        <el-row class="account_info">
            <el-row class="account_table">
                <div class="judge_account">
                    <div class="account_title hpx-label">兴业户</div>
                    <div class="account_data">
                        <el-table
                            :data="xingye_bank"
                            style="width: 100%"
                            :cell-class-name="calcStyle">
                            <el-table-column
                                prop="accountName"
                                label="银行名称">
                                <template scope="scope">
                                    {{ hideAfter(scope.row.accountName) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                property ="accountNo"
                                label="虚拟账户">
                                <template scope="scope">
                                    {{ hide(scope.row.accountNo,'***') }} 
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="blance"
                                label="账户余额">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="judge_account">
                    <div class="account_title hpx-label">非兴业户</div>
                    <div class="account_data">
                        <el-table
                            :data="other_bank"
                            style="width: 100%"
                            :cell-class-name="calcStyle">
                            <el-table-column
                                prop="accountName"
                                label="银行名称">
                                <template scope="scope">
                                    {{ hideAfter(scope.row.accountName) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                property ="accountNo"
                                label="虚拟账户">
                                <template scope="scope">
                                    {{ hide(scope.row.accountNo,'***') }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="balance"
                                label="账户余额">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-row>
            <div class="judge_name">
                <el-row class="judge_name_inner">
                    <el-row class="block_title row">{{bank_account.enterprise_name}}</el-row>
                    <el-row class="login_number">
                        <el-row><span class="hpx-label">您的兴业数金执剑人账户登录名：</span><span>{{bank_account.xingYeUserName}}</span></el-row>
                        <el-row><span class="hpx-label">兴业数金执剑人账户初始密码：</span><span>{{bank_account.xingYePassword}}</span></el-row>
                        <el-button type="primary" round @click="toXingye">登录充值与提现</el-button>
                    </el-row>
                    <el-row class="block_tips row">
                        <span class="tips_title"><i class="iconfont icon-tixing hpx-red-tips"></i> 温馨提示：</span>
                        <span class="tips_content">执剑人账户余额可用于收票，只可提现至兴业银行账户；非兴业银行账户不可用于收票，只可提现至非兴业银行账户！</span>
                    </el-row>
                </el-row>
            </div>
        </el-row>
        <!-- <WarmPrompt class="warm_box_account" warContent="执剑人账户余额可用于收票，只可提现至兴业银行账户；非兴业银行账户不可用于收票，只可提现至非兴业银行账户！"/> -->
        <el-row class="block_title row">
            <el-col :span="12">已绑账户：<span class="hpx-red-tips">{{accountLen}}</span> 个</el-col>
            <el-col :span="12" class="right_top_btn">
                <el-button size="small" @click="add_new_account()"><i class="iconfont icon-tianjia"> 添加对公账户</i></el-button>
            </el-col>
        </el-row>
        <el-row class="accountList">
            <Table :tableData="tableData" :pagination="false">
                <template slot-scope="{scope}">
                    <span class="defult_account" v-if="scope.row.default_account == 0 && scope.row.status == 1">默认账户</span>
                    <el-button size="small" type="primary" @click="setDefaultAccount(scope.row.account_id)" v-if="scope.row.default_account != 0 && scope.row.status == 1">
                        设为默认账户
                    </el-button>
                    <el-button size="small" type="primary" v-if="scope.row.status == 5" @click="checkAccount(scope.row)">鉴权</el-button>
                </template> 
            </Table>
        </el-row>
        <!-- <WarmPrompt class="warm_box_account" warContent="出票方可绑定任一银行对公账户用于交易提现，建议背书出票的对公户与资金入账的对公户一致，收票方必须绑定兴业银行对公账户用于电票的付款和签收。最多可绑定两个对公户（其中一张必须为兴业银行卡）作为签收、出票的指定账户！"/> -->
        <el-row class="block_tips row">
            <span class="tips_title"><i class="iconfont icon-tixing hpx-red-tips"></i> 温馨提示：</span>
            <span class="tips_content">
                出票方可绑定任一银行对公账户用于交易提现，建议背书出票的对公户与资金入账的对公户一致，收票方必须绑定兴业银行对公账户用于电票的付款和签收。最多可绑定4个对公户（其中一张必须为兴业银行卡）作为签收、出票的指定账户！
            </span>
        </el-row>
        <!-- 添加对公户弹框 -->
        <DialogInput ref="remin" title="新增银行账户">
            <div class="rem-dialog-con add_bank_dialog">
                <div class="rem-dialog-con text_left">
                    <el-form label-width="105px" size="small">
                        <el-form-item label="企业名称:">{{userInfo.enterprise_name}}</el-form-item>
                        <el-form-item label="企业银行账号:">
                            <el-col :span="16" class="bank_input">
                                <el-input type="number" placeholder="请输入企业银行帐号" v-model="form.account_number"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="银行行号:">
                            <el-col :span="16" class="bank_input">
                                <el-input type="number" placeholder="请输入银行行号" size="small" v-model="form.cnaps_code" @input="searchBankName()"></el-input>
                            </el-col>
                            <el-col :span="4" class="bank_btn">
                                <el-button type="primary" plain size="small" @click="goFindBank()">查询行号</el-button>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="银行名称:">
                            {{bank_name}}
                        </el-form-item>
                    </el-form>
                </div>
                <el-row class="text_center">
                    <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                    <el-button type="primary" class="dialog-button" @click="addNewAccount()">提交</el-button>
                </el-row>
            </div>
            <span slot="Remfooter" class="dialog-footer">
                <div><i class="iconfont icon-tixing hpx-red-tips"></i> <span class="block_title">温馨提示:</span></div>
                <div class="hpx-label">
                    点击提交后，所绑定银行账户将在10分钟内收到一笔随机汇款，请注意填写验证金额，完成验证。银行账户一经绑定成功，后期无法更改，请慎重选择长用帐户。
                </div>
            </span>
        </DialogInput>
        <DialogInput ref="checkAccountDialog" title="银行账户验证" class="verify_bank_dialog">
            <div class="rem-dialog-con text_left">
                <el-form label-width="120px" size="small">
                    <el-form-item label="银行账户验证：">
                        <el-col :span="16">
                            <el-input type="number" placeholder="请输入绑定账户中的鉴权金额" v-model="form.amt" suffix-icon="iconfont icon-yuan"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="dialog-footer">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button type="primary" class="dialog-button" @click="confirmCheckAccount()">账户验证</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue'  
    import { hideStr, ellipsis } from '@/util/format'
    import { mapGetters, mapState } from 'vuex';
    import DialogInput from '@component/common/DialogInput.vue'
    import WarmPrompt from '@component/common/WarmPrompt.vue';
    import { xingyeURL } from '@/util/constant';
    import _ from 'lodash';
    @Component({
        components:{
            Table,
            DialogInput,
            WarmPrompt
        },
        computed:{
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class Judge extends Vue {
    //data
        //@Getter userInfo
        bank_account:any = {}
        tableData:TableData = {
            header:[
                {
                    label: '机构名称',
                    key: 'account_person'
                },
                {
                    label: '账户',
                    key: 'account_number',
                    formatter: row => hideStr(row.account_number,'***')
                },
                {
                    label: '银行行号',
                    key: 'cnaps_code'
                },
                {
                    label: '银行名称',
                    key: 'bank_name'
                },
                {
                    label: '审核状态',
                    key: 'statusToDescription'
                }
            ],
            body: [],
            footer: {
                total: 100,
                pageSize: 10,
                currentPage: 1,
            }
        }
        xingye_bank = []
        other_bank = []
        form = {
            account_number: '',
            cnaps_code: '',
            amt: ''
        }
        checkModel: any = {};
        bank_name = ''
        //用户基本信息
        customerInfo:any = {}
    //methods
        //查询用户基本信息
        async getCustomerInfo () {
            let res = await this.$http.get(`customers/customer/${this.userInfo.customer_id}`)
            if(res.status == 200){
                this.customerInfo = res.data
            }
        }
        //查询执剑人账户信息
        async getQuery() {
            let res = await this.$http.get('paying/xingyeapi/query')
            if(res.status == 200 && res.data){
                this.xingye_bank = res.data.xingYeBankDtos
                this.other_bank = res.data.otherAccounts
            }
        }
        //验证是否操作员
        // async isOperate () {
            
        // }
        //去兴业执剑人登录
        toXingye () {
            if(this.customerInfo.isOperate == 1){
                this.$alert('您是操作员，无法进行此操作！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            window.open(xingyeURL.URL+`/${this.userInfo.corpNo}`);
        }
        //查询银行卡账户信息
        async getAccount () {
            let res = await this.$http.get(`paying/xingyeapi/account/getAccount/${this.userInfo.enterprise_id}`)
            if(res.status == 200){
                if(res.data){
                    this.bank_account = res.data
                    this.tableData.body = res.data.acct_list
                }
            }
        }
        // 跳转汇票助手行号查询
        goFindBank () {
            window.open('tools.html#/querybank');
        }
        //添加对公户
        add_new_account () {
            if(this.customerInfo.isOperate == 1){
                this.$alert('您是操作员，无法进行此操作！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(this.bank_account.acct_list.length > 3){
                this.$alert('平台目前最多支持绑定4个对公账户!','提示',{
                    confirmButtonText: '我知道了',
                    customClass: 'custom-message-box'
                })
                return false
            }else{
                let no_xingye = this.bank_account.acct_list.filter(el => el.is_xingye_account == 1)
                if(no_xingye.length == 3){
                    this.$confirm('您已绑定3个非兴业银行对公账户，第4个必须绑定兴业银行对公账户， 用于电票的付款与签收！','提醒',{
                        confirmButtonText: '知道了，继续绑定',
                        cancelButtonText: '取消',
                        customClass: 'custom-message-box'
                    }).then(() => {
                        this.$refs['remin'].openDialog();
                    })
                }else{
                    this.$refs['remin'].openDialog();
                }
            }
            // if(this.bank_account.acct_list.length >= 3){
            //     _.forEach(this.bank_account.acct_list, (val) => {
            //         if(_.startsWith(val.cnaps_code, 309)){
            //             this.$refs['remin'].openDialog();
            //         }else {
            //             this.$confirm('您已绑定3个非兴业银行对公账户，第4个必须绑定兴业银行对公账户， 用于电票的付款与签收！','提醒',{
            //                 confirmButtonText: '知道了，继续绑定',
            //                 cancelButtonText: '取消',
            //                 customClass: 'custom-message-box'
            //             }).then(() => {
            //                 this.$refs['remin'].openDialog();
            //             })
            //         }
            //     })
            // }else {
            //     this.$refs['remin'].openDialog();
            // }
        }
        //根据行号查行名
        async searchBankName () {
            if(!this.form.cnaps_code){ return false } 
            let res = await this.$http.get(`banks/bank/getCnapsInfo/${this.form.cnaps_code}`)
            if(res.status == 200){
                this.bank_name = res.data.bank_branch_name
            }
        }
        //提交添加对公户
        async addNewAccount () {
            if(!this.form.account_number){
                this.$alert('请输入企业银行账号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.form.cnaps_code){
                this.$alert('请输入银行行号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let res:any = await this.$http.post(`paying/xingyeapi/xingYeOpenAccount/addMoreAccount/${this.userInfo.enterprise_id}`,{
                account_number: this.form.account_number,
                cnaps_code: this.form.cnaps_code
            })
            if(res.status == 200){
                this.getAccount()
                this.$refs['remin'].closeDialog();
                this.$alert('绑定成功，等待小额鉴权！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {
                        this.getAccount();
                        this.getQuery();
                    }
                })
            }
            // else{
            //     this.$alert(res.msg,{
            //         title: '提醒'
            //     })
            // }
        }
        //设为默认账户
        async setDefaultAccount (account_id) {
            if(this.customerInfo.isOperate == 1){
                this.$alert('您是操作员，无法进行此操作！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let res:any = await this.$http.put(`paying/xingyeapi/account/defaultAccount/${account_id}`)
            if(res.status == 200){
                this.getAccount()
            }
            // else{
            //     this.$alert(res.msg,{
            //         title: '提醒'
            //     })
            // }
        }
        get accountLen () {
            return this.tableData.body.length
        }
        hide (value:string,replaceStr:string = '') {
            return hideStr(value,replaceStr)
        }
        hideAfter (row) {
            return row.substring(5,row.length);
        }
        async checkAccount (row) {
            if(this.customerInfo.isOperate == 1){
                this.$alert('您是操作员，无法进行此操作！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            this.checkModel = row;
            this.$refs['checkAccountDialog'].openDialog();
        }
        async confirmCheckAccount () {
            let checkForm = {
                amt: this.form.amt,
                accountId: this.checkModel.account_id
            }
            let res = await this.$http.post(`paying/xingyeapi/xingYeOpenAccount/checkAccount/${this.userInfo.enterprise_id}`,checkForm)
            if(res.status == 200){
                this.$refs['checkAccountDialog'].closeDialog();
                if(this.bank_account.acct_list.length == 1){
                    this.$alert('小额鉴权成功，退出重新登录！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {
                            this.logout();
                        }
                    })
                }else {
                    this.$alert('小额鉴权成功！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {
                            this.getAccount();
                        }
                    })
                }

            }
        }
        async logout() {
            let res = await this.$http.post('customers/customerLogout')
            localStorage.removeItem('userInfo');
            localStorage.removeItem('Authorization');
            location.href = "user.html";
        }
        closeDialog () {
            this.$refs['remin'].closeDialog();
            this.$refs['checkAccountDialog'].closeDialog();
        }
        created () {
            this.getCustomerInfo()
        }
        mounted () {
            this.getQuery()
            this.getAccount()
        }
        calcStyle ({column,row}) {
            if(column.label == '账户余额'){
                return 'red'
            }
        }  
    }
</script>

<style lang="scss" scoped>
    
    .row{
        @extend .hpx-font-weight;
        @extend .hpx-label;
    }
    .block_tips{
        font-size: 16px;
        line-height: 22px;
        margin-top: 15px;
        span{
            display: block;
            float: left;
            // line-height: 22px;
            // margin: 22px 0;
        }
        .tips_title{
            width: 102px;
        }
        .tips_content{
            font-weight: 500;
            font-size: 14px;
            width: calc(100% - 102px);
        }
    }
    .add_bank_dialog{
        .bank_input{
            width: 320px;
        }
        .bank_btn{
            margin-left: 12px;
        }
        .text_center{
            margin-left: 105px;
            text-align: left;
            .el-button:nth-child(2){
                margin-left: 16px;
            }
        }
    }
    .verify_bank_dialog{
        .el-dialog__body{
            .el-col{
                width: 320px;
            }
        }
        .el-dialog__footer{
            .reminder-dialog-footer{
                .el-button:nth-child(2){
                    margin-left: 16px;
                    height: 36px;
                }
            }
        }
    }
    .block_title{
        font-size: 18px;
        line-height: 45px;
    }
    .account_info{
        min-height: 314px;
        background-color: $__color-bg-primary;
        margin-bottom: 40px;
        position: relative;
        .account_table{
            width: 35%;
            float: left;
            .judge_account{
                width: 100%;
                border: 1px dashed $__color-border;
                box-sizing: border-box;
                display: flex;
                min-height: 152px;
                &:first-child{
                    margin-bottom: 10px;
                }
                .el-table{
                    .el-table__header-wrapper{
                        tr{
                            background-color: $__color-bg-primary !important;
                        }
                    }
                }
            }
        }
    }
    .account_title{
        float: left;
        width: 40px;
        min-height: 152px;
        font-size: 18px;
        writing-mode: vertical-lr;
        background-color: #fff;
        text-align: center;
        line-height: 40px;
        border-left: 4px solid $__color-primary;
        border-right: 0.5px solid $__color-line;
    }
    .account_data{
        width: calc(100% - 45px);
        float: right;
        background: #fff;
    }
    .judge_name{
        position: absolute;
        .judge_name_inner{
            padding: 0 35px;
            height: 100%;
        }
        width: calc(65% - 100px);
        height: 274px;
        top: 50%;
        right: 50px;
        margin-top: -137px;
        background-color: #fff;
        .block_title{
            height: 25px;
            line-height: 25px;
            margin: 20px 0;
        }
        .login_number{
            font-size: 16px;
            height: 154px;
            border-bottom: 1px solid $__color-line;
            .el-row{
                height: 22px;
                line-height: 22px;
                margin-bottom: 10px;
            }
            .el-button{
                margin-top: 20px;
                box-shadow:2px 2px 10px 0px rgba(249,185,38,1);
            }
        }
        .block_tips{
            // position: absolute;
            // bottom: 0;
            // margin-bottom: 0;
        }
    }
    
    .right_top_btn{
        // display: flex;
        // justify-content: flex-end;
        text-align: right;
        button{
            border: 1px solid $__color-link; 
            background-color: $__color-bg-multiple;
            color: $__color-link; 
        }
    }
    .accountList{
        border-top:  1px solid $__color-primary;
    }
    .el-table tr{
        height: 50px !important;
    }
    @media (max-width: 1400px) { 
        .judge_name{
            width: calc(65% - 60px);
            right: 30px;
            .judge_name_inner{
                padding: 0 15px;
            }
        }
    }
    .rem-dialog-con.text_left{
        color: $__color-show;
        font-size: 14px;
        .el-row{
            line-height: 32px;
        }
    }
    .text_center{
        text-align: center;
    }
    .dialog-footer{
        div:first-child{
            width: 100px;
            float: left;
            text-align: left;
        }
        div:nth-child(2){
            width: 420px;
            float: left;
            font-size: 14px;
            text-align: left;
            line-height: 20px;
        }
        .block_title{
            line-height: normal;
        }
        .red{
            color: $__color-remind;
        }
    }  
    .defult_account{
        display: inline-block;
        width: 86px;
        height: 24px;
        background-color: $__color-bg-unimportance;
        color: $__color-primary;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        border-radius: 50px;
    }
    .warm_box_account {
        justify-content: left;
        margin-top: 10px;
        margin-bottom: 10px;
    }
</style>
<style lang="scss">
    .custom-message-box {
        .el-message-box__btns {
            padding: 15px 15px 15px;
        }
    }
    .verify_bank_dialog{
        .el-dialog__footer{
            .reminder-dialog-footer{
                display: block;
                margin-left: 120px;
                text-align: left;
            }
        }
    }
</style>